<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="基本信息" name="first"><div>
      <el-row :gutter="15">
        <el-form ref="loupanform" :model="formData" :rules="rules" size="medium" label-width="100px">
          <el-col :span="24">
            <el-form-item label="楼盘名称" prop="name">
              <el-input v-model="formData.name" placeholder="请输入楼盘名称" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="楼盘地址" prop="address">
              <el-autocomplete
                v-model="formData.address"
                :fetch-suggestions="querySearch"
                placeholder="请输入楼盘地址"
                style="width: 100%"
                :trigger-on-focus="false"
                @select="handleSelect"
              />
              <!--<div style="margin: 5px">
                <baidu-map class="bm-view" :center="mapCenter" :zoom="mapZoom" :scroll-wheel-zoom="true" ak="baidu-ak" @ready="handlerBMap" />
              </div>-->
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="-3px"  label="省" prop="province">
              <el-select v-model="formData.province" @change="getcityOptions()" placeholder="请选择省" clearable>
                <el-option v-for="(item, index) in shengoptions" :key="item.value" :label="item.label"
                           :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="-3px" label="市" prop="city">
              <el-select v-model="formData.city" @change="getcountyOptions()" placeholder="请选择市" clearable>
                <el-option v-for="(item, index) in cityOptions" :key="item.value" :label="item.label"
                           :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="-4px" label="区" prop="county">
              <el-select v-model="formData.county"  @change="getareaOptions()"  placeholder="请选择省或区" clearable>
                <el-option v-for="(item, index) in countyOptions" :key="item.value" :label="item.label"
                           :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商圈" prop="commercialArea">
              <el-checkbox-group v-model="commercialAreaarr" size="medium">
                <el-checkbox @change="shangquan()" v-for="(item, index) in areaOptions" :key="index" :label="item.id"
                             >{{item.name}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="地铁" prop="subway">
              <el-checkbox-group v-model="subwayarr" size="medium">
                <el-checkbox @change="ditie()" v-for="(item,index) in subwayOptions" :key="index" :label="item.id"
                             >{{item.subway}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="建筑面积" prop="proportion">
              <el-input v-model="formData.proportion" placeholder="请输入建筑面积" clearable>
                <template slot="append">平方米</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="建筑类型" prop="buildingType">
              <el-checkbox-group v-model="buildingTypearr" size="medium">
                <el-checkbox  @change="jianzhu()" v-for="(item, index) in buildingOptions" :key="index" :label="item.value"
                             >{{item.label}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="社区类型" prop="communityType">
              <el-select v-model="formData.communityType" placeholder="请选择社区类型" clearable :style="{width: '100%'}">
                <el-option v-for="(item, index) in munityOptions" :key="index" :label="item.label"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="物业类型" prop="premisesType">
              <el-checkbox-group v-model="premisesTypearr" size="medium">
                <el-checkbox  @change="wuye()" v-for="(item, index) in premissOptions" :key="index" :label="item.value"
                             >{{item.label}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :span="15">
            <el-form-item label="楼盘特色" prop="propertys">
              <el-checkbox-group v-model="formData.propertys" size="medium">
                <el-checkbox  @change="tese()" v-for="(item, index) in propertyOptions" :key="index" :label="item.id"
                             :disabled="item.disabled">{{item.premisesProperty}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="容积率" prop="grossPlotRatio">
              <el-input v-model="formData.grossPlotRatio" placeholder="请输入容积率" clearable :style="{width: '100%'}">
                <template slot="append">平方米</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="得房率" prop="efficiency">
              <el-input v-model="formData.efficiency" placeholder="请输入得房率" clearable :style="{width: '100%'}">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="绿化率" prop="greenCoverage">
              <el-input v-model="formData.greenCoverage" placeholder="请输入绿化率" clearable :style="{width: '100%'}">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="楼栋数" prop="buildingCount">
              <el-input v-model="formData.buildingCount" placeholder="请输入楼栋数" clearable :style="{width: '100%'}">
                <template slot="append">栋</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="开发商" prop="developer">
              <el-input v-model="formData.developer" placeholder="请输入开发商" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="物业管理公司" prop="estate">
              <el-input v-model="formData.estate" placeholder="请输入物业管理公司" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="楼盘简介" prop="introduce">
              <el-input v-model="formData.introduce" type="textarea" placeholder="请输入楼盘简介"
                        :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="周边配套">
              <el-button type="primary" @click="addzhoubian">增加</el-button>
              <div v-for="(item,index) in formData.zhoubianlist">
                <el-row>
                  <el-col :span="10">
                    <el-form-item  label="标题">
                      <el-input v-model="item.title" autocomplete="off"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="内容">
                      <el-input v-model="item.content" autocomplete="off"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="2">
                    <el-button type="danger" @click="deletezhoubian(index)">删除</el-button>
                  </el-col>
                </el-row>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="交通情况">
              <el-button type="primary" @click="addjiaotong">增加</el-button>
              <div v-for="(item,index) in formData.jiaotonglist">
                <el-row>
                  <el-col :span="10">
                    <el-form-item  label="标题">
                      <el-input v-model="item.title" autocomplete="off"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="内容">
                      <el-input v-model="item.content" autocomplete="off"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="2">
                    <el-button type="danger" @click="deletejiaotong(index)">删除</el-button>
                  </el-col>
                </el-row>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item size="large">
              <el-button type="primary" @click="submitForm">提交</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div></el-tab-pane>
    <el-tab-pane label="相册管理" name="second">
      <template>
        <div>
          <el-row :gutter="15">
            <el-form ref="loupanform" :model="formData" :rules="rules" size="medium" label-width="100px">
              <div  style="width: 1000px;height: 100px">
                <el-col :span="9">
                  <el-form-item label="户型图">
                    <el-upload
                      class="upload-demo"
                      action="http://localhost/dev-api/file/file/upload"
                      :on-success="handlesuccess1"
                      :on-preview="handlePreview1"
                      :on-remove="handleRemove1"
                      :before-remove="beforeRemove1"
                      multiple
                      v-model="formData.field1">
                      <el-button size="small" icon="el-icon-upload" type="primary">点击上传</el-button>
                    </el-upload>
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="">
                    <el-button type="primary" icon="el-icon-search" @click="field1yulan" size="medium"> 预览 </el-button>
                  </el-form-item>
                </el-col>
              </div>
              <div style="width: 1000px;height: 100px">
                <el-col :span="9">
                  <el-form-item label="外景图">
                    <el-upload
                      class="upload-demo"
                      action="http://localhost/dev-api/file/file/upload"
                      :on-success="handlesuccess2"
                      :on-preview="handlePreview2"
                      :on-remove="handleRemove2"
                      :before-remove="beforeRemove2"
                      multiple>
                      <el-button size="small" icon="el-icon-upload" type="primary">点击上传</el-button>
                    </el-upload>
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="">
                    <el-button type="primary" icon="el-icon-search" @click="field2yulan" size="medium"> 预览 </el-button>
                  </el-form-item>
                </el-col>
              </div>
              <div style="width: 1000px;height: 100px">
                <el-col :span="9">
                  <el-form-item label="施工图">
                    <el-upload
                      class="upload-demo"
                      action="http://localhost/dev-api/file/file/upload"
                      :on-success="handlesuccess3"
                      :on-preview="handlePreview3"
                      :on-remove="handleRemove3"
                      :before-remove="beforeRemove3"
                      multiple>
                      <el-button size="small" icon="el-icon-upload" type="primary">点击上传</el-button>
                    </el-upload>
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="">
                    <el-button type="primary" icon="el-icon-search" @click="field3yulan" size="medium"> 预览 </el-button>
                  </el-form-item>
                </el-col>
              </div>
              <div style="width: 1000px;height: 100px">
                <el-col :span="9">
                  <el-form-item label="效果图">
                    <el-upload
                      class="upload-demo"
                      action="http://localhost/dev-api/file/file/upload"
                      :on-success="handlesuccess4"
                      :on-preview="handlePreview4"
                      :on-remove="handleRemove4"
                      :before-remove="beforeRemove4"
                      multiple>
                      <el-button size="small" icon="el-icon-upload" type="primary">点击上传</el-button>
                    </el-upload>
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="">
                    <el-button type="primary" icon="el-icon-search"  @click="field4yulan" size="medium"> 预览 </el-button>
                  </el-form-item>
                </el-col>
              </div>
              <div style="width: 1000px;height: 100px">
                <el-col :span="9">
                  <el-form-item label="首页图">
                    <el-upload
                      class="upload-demo"
                      action="http://localhost/dev-api/file/file/upload"
                      :on-success="handlesuccess5"
                      :on-preview="handlePreview5"
                      :on-remove="handleRemove5"
                      :before-remove="beforeRemove5"
                      multiple>
                      <el-button size="small" icon="el-icon-upload" type="primary">点击上传</el-button>
                    </el-upload>
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="">
                    <el-button type="primary" icon="el-icon-search"  @click="field5yulan" size="medium"> 预览 </el-button>
                  </el-form-item>
                </el-col>
              </div>

              <el-col :span="24">
                <el-form-item size="large">
                  <el-button type="primary" @click="submitForm">提交</el-button>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
        </div>
      </template>
    </el-tab-pane>
  </el-tabs>

</template>
<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import {getsheng, getshi, getxian,getzhixiasubway,getsubway,getarea,getproperty,addloupan,getuuid} from "@/api/system/info";
let Base64 = require('js-base64').Base64
export default {
  components: {
    BaiduMap
  },
  props: [],
  data() {
    return {
      mapZoom: 15,
      mapCenter: { lng: 0, lat: 0 },
      commercialAreaarr: [],
      subwayarr: [],
      buildingTypearr: [],
      premisesTypearr: [],
      formData: {
        uuid:"",
        field1: "",
        field2: "",
        field3: "",
        field4: "",
        field5: "",
        name: '',
        address: '',
        coordinate: undefined,
        province: null,
        city: null,
        county: null,
        commercialArea: null,
        subway: null,
        proportion: null,
        buildingType: null,
        communityType: null,
        premisesType: null,
        propertys: [],
        grossPlotRatio: null,
        efficiency: null,
        greenCoverage: null,
        buildingCount: null,
        developer: null,
        estate: null,
        introduce: null,
        zhoubianlist:[],
        jiaotonglist:[],
      },
      rules: {
        name: [{
          required: true,
          message: '请输入楼盘名称',
          trigger: 'blur'
        }],
        address: [{
          required: true,
          message: '请输入楼盘地址',
          trigger: 'blur'
        }],
        province: [{
          required: true,
          message: '请选择省',
          trigger: 'change'
        }],
        city: [{
          required: true,
          message: '请选择市',
          trigger: 'change'
        }],
        county: [{
          required: true,
          message: '请选择县或区',
          trigger: 'change'
        }],

      },
      shengoptions:[],
      cityOptions: [],
      countyOptions: [],
      areaOptions: [],
      subwayOptions: [],
      propertyOptions: [],
      buildingOptions: [{
        "label": "板楼",
        "value": 1
      }, {
        "label": "塔楼",
        "value": 2
      }, {
        "label": "板塔结合",
        "value": 3
      }, {
        "label": "底层",
        "value": 4
      }, {
        "label": "多层",
        "value": 5
      }, {
        "label": "高层",
        "value": 6
      }],
      munityOptions: [{
        "label": "未知类型",
        "value": 1
      }, {
        "label": "大型社区",
        "value": 2
      }, {
        "label": "中型社区",
        "value": 3
      }, {
        "label": "小型社区",
        "value": 4
      }],
      premissOptions: [{
        "label": "普通住宅",
        "value": 1
      }, {
        "label": "公寓",
        "value": 2
      }, {
        "label": "商住两用",
        "value": 3
      }, {
        "label": "商业地产",
        "value": 4
      }, {
        "label": "写字楼",
        "value": 5
      }],
      activeName: 'first',
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getsheng();
    this.gettese();
    this.gettbuuid();
    /*this.getform();*/
  },
  mounted() {},
  methods: {
    /*getform(){
      //this.formData = this.$route.params.datas;
      console.log("修改数据:",this.$route.params.datas);
      /!*if (this.formData={}){

      }*!/
    },*/
    gettbuuid(){
      getuuid().then(response=>{
        console.log(response);
        this.formData.uuid=response;
      })
    },
    handlesuccess1(file){
      console.log("....",file);
      this.formData.field1=file.data.url
      console.log("....",this.formData.field1);
    },
    handleRemove1(file) {
      console.log("::::",file);
    },
    handlePreview1(file) {
      console.log("1111",file);
    },
    beforeRemove1(file) {
      return this.$confirm(`确定移除${ file.name }'？`);
    },
    handlesuccess2(file){
      console.log("....",file);
      this.formData.field2=file.data.url
      console.log("....",this.formData.field2);
    },
    handleRemove2(file) {
      console.log("::::",file);
    },
    handlePreview2(file) {
      console.log("1111",file);
    },
    beforeRemove2(file) {
      return this.$confirm(`确定移除${ file.name }'？`);
    },
    handlesuccess3(file){
      console.log("....",file);
      this.formData.field3=file.data.url
      console.log("....",this.formData.field3);
    },
    handleRemove3(file) {
      console.log("::::",file);
    },
    handlePreview3(file) {
      console.log("1111",file);
    },
    beforeRemove3(file) {
      return this.$confirm(`确定移除${ file.name }'？`);
    },
    handlesuccess4(file){
      console.log("....",file);
      this.formData.field4=file.data.url
      console.log("....",this.formData.field4);
    },
    handleRemove4(file) {
      console.log("::::",file);
    },
    handlePreview4(file) {
      console.log("1111",file);
    },
    beforeRemove4(file) {
      return this.$confirm(`确定移除${ file.name }'？`);
    },
    handlesuccess5(file){
      console.log("....",file);
      this.formData.field5=file.data.url
      console.log("....",this.formData.field5);
    },
    handleRemove5(file) {
      console.log("::::",file);
    },
    handlePreview5(file) {
      console.log("1111",file);
    },
    beforeRemove5(file) {
      return this.$confirm(`确定移除${ file.name }'？`);
    },
    submitForm() {
      this.$refs['loupanform'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
        console.log("楼盘添加form表单:",this.formData);
        addloupan(this.formData).then(response=>{
          console.log("楼盘添加form表单返回值:",response);
          if (response==1){
            this.$message.success("提交成功!")
            this.$router.push({path:"info"})
          }else if(response==3){
            this.$message.error("请付重复提交订单!");
          }else{
            this.$message.error("提交失败!");
          }
        })
      })
    },
    getcityOptions() {
      // TODO 发起请求获取数据
      this.cityOptions=[];
      this.subwayOptions=[];
      this.countyOptions=[];
      this.formData.subway=[];
      this.areaOptions=[];
      this.formData.city=null;
      this.formData.county=null;
      console.log("getshi:",this.formData);
      getshi(this.formData).then(response=>{
        this.cityOptions=response;
      })
      //查询直辖市地铁
      getzhixiasubway(this.formData).then(response=>{
        this.subwayOptions=response;
        console.log("subway",this.subwayOptions);
      })
    },
    getcountyOptions() {
      // TODO 发起请求获取数据
      console.log("getxian:",this.formData);
      getxian(this.formData).then(response=>{
        this.countyOptions=response;
      });
      if (this.formData.province !==2 && this.formData.province !== 3 && this.formData.province !== 23 && this.formData.province !== 10){
        getsubway(this.formData).then(response=>{
          this.subwayOptions=response;
          console.log("subway",this.subwayOptions);
        })
      }

    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    deletezhoubian(index){
      this.formData.zhoubianlist.splice(index,1)
    },
    addzhoubian(){
      this.formData.zhoubianlist.push({
        title:'',
        content:''
      })
    },
    deletejiaotong(index){
      this.formData.jiaotonglist.splice(index,1)
    },
    addjiaotong(){
      this.formData.jiaotonglist.push({
        title:'',
        content:''
      })
    },
    getshangquanOptions(value){
      console.log("获取地铁的下标:",value)
      console.log("获取地铁的下标:",this.formData.subway)
    },
    getareaOptions(){
      this.areaOptions=[];
      console.log("get商圈传参:",this.formData)
      getarea(this.formData).then(response => {
        this.areaOptions=response;

      });
    },
    getsheng(){
      getsheng().then(response => {
        this.shengoptions=response;
      });
    },
    gettese(){
      getproperty().then(response => {
        this.propertyOptions=response;
      });
    },
    shangquan(){
      console.log("商圈:",this.commercialAreaarr);
      var arr = this.commercialAreaarr.join(',');
      this.formData.commercialArea=arr;
      console.log("商圈拼接:",this.formData.commercialArea);
    },
    ditie(){
      console.log("地铁:",this.subwayarr);
      var arr = this.subwayarr.join(',');
      this.formData.subway=arr;
      console.log("地铁拼接:",this.formData.subway);
    },
    wuye(){
      console.log("物业:",this.premisesTypearr);
      var arr = this.premisesTypearr.join(',');
      this.formData.premisesType=arr;
      console.log("物业拼接:",this.formData.premisesType);
    },
    jianzhu(){
      console.log("建筑:",this.buildingTypearr);
      var arr = this.buildingTypearr.join(',');
      this.formData.buildingType=arr;
      console.log("建筑拼接:",this.formData.buildingType);
    },
    tese(){
      console.log("特色:",this.formData.propertys);
    },
    field1yulan(){
      var url = this.formData.field1 //要预览文件的访问地址
      window.open(url);
    },
    field2yulan(){
      var url = this.formData.field2 //要预览文件的访问地址
      window.open(url);
    },
    field3yulan(){
      var url = this.formData.field3 //要预览文件的访问地址
      window.open(url);
    },
    field4yulan(){
      var url = this.formData.field4 //要预览文件的访问地址
      window.open(url);
    },
    field5yulan(){
      var url = this.formData.field5 //要预览文件的访问地址
      window.open(url);

    },
    handlerBMap({ BMap, map }) {
      this.BMap = BMap
      this.map = map
      if (this.formData.coordinate && this.formData.coordinate.lng) {
        this.mapCenter.lng = this.formData.coordinate.lng
        this.mapCenter.lat = this.formData.coordinate.lat
        this.mapZoom = 15
        map.addOverlay(new this.BMap.Marker(this.formData.coordinate))
      } else {
        this.mapCenter.lng = 113.271429
        this.mapCenter.lat = 23.135336
        this.mapZoom = 10
      }
    },
    querySearch(queryString, cb) {
      var that = this
      var myGeo = new this.BMap.Geocoder()
      myGeo.getPoint(queryString, function(point) {
        if (point) {
          that.formData.coordinate = point
          that.makerCenter(point)
        } else {
          that.formData.coordinate = null
        }
      }, this.locationCity)
      var options = {
        onSearchComplete: function(results) {
          if (local.getStatus() === 0) {
            // 判断状态是否正确
            var s = []
            for (var i = 0; i < results.getCurrentNumPois(); i++) {
              var x = results.getPoi(i)
              var item = { value: x.address + x.title, point: x.point }
              s.push(item)
              cb(s)
            }
          } else {
            cb()
          }
        }
      }
      var local = new this.BMap.LocalSearch(this.map, options)
      local.search(queryString)
    },
    handleSelect(item) {
      var { point } = item
      this.formData.coordinate = point
      this.makerCenter(point)
    },
    makerCenter(point) {
      if (this.map) {
        this.map.clearOverlays()
        this.map.addOverlay(new this.BMap.Marker(point))
        this.mapCenter.lng = point.lng
        this.mapCenter.lat = point.lat
        this.mapZoom = 15
      }
    }
  }
}

</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}
.bm-view {
  width: 100%;
  height: 500px;
}

</style>
